---
title: משוב
image: /images/user-guide/emails/emails_header.png
---

<Frame>
  <img src="/images/user-guide/emails/emails_header.png" alt="Header" />
</Frame>

מציין התקדמות או ספירה לאחור ועובר מימין לשמאל.

<Tabs>

<Tab title="Usage">

```jsx
import { ProgressBar } from "twenty-ui/feedback";

export const MyComponent = () => {
  return (
    <ProgressBar
      duration={6000}
      delay={0}
      easing="easeInOut"
      barHeight={10}
      barColor="#4bb543"
      autoStart={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| תכונות        | סוג     | תיאור                                                              | ברירת מחדל     |
| ------------- | ------- | ------------------------------------------------------------------ | -------------- |
| משך זמן       | מספר    | המשך הכולל של האנימציה של פס ההתקדמות במילישניות                   | 3              |
| השהייה        | מספר    | ההשהיה בהתחלת האנימציה של פס ההתקדמות במילישניות                   | <span>0</span> |
| שיפוע         | string  | פונקציית השיפוע לאנימציית פס ההתקדמות                              | easeInOut      |
| גובהפס        | מספר    | הגובה של הפס בפיקסלים                                              | 24             |
| צבעפס         | string  | הצבע של פס ההתקדמות                                                | gray80         |
| התחלהאוטומטית | בוליאני | אם `true`, האנימציה של פס ההתקדמות תתחיל אוטומטית כאשר הרכיב מוטמע | `נכון`         |

</Tab>
</Tabs>

## פס התקדמות מעגלי

מציין את התקדמות המשימה, לעיתים קרובות בשימוש במסכים נטענים או אזורים שבהם רוצים לתקשר עם המשתמש לגבי תהליכים מתמשכים.

<Tabs>

<Tab title="Usage">

```jsx
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";

export const MyComponent = () => {
  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
```

</Tab>

<Tab title="Props">

| תכונות | סוג    | תיאור                       | ברירת מחדל   |
| ------ | ------ | --------------------------- | ------------ |
| גודל   | מספר   | הגודל של פס ההתקדמות המעגלי | 50           |
| רוחבפס | מספר   | הרוחב של הקו של פס ההתקדמות | 5            |
| צבעפס  | string | הצבע של פס ההתקדמות         | currentColor |

</Tab>

</Tabs>
